<template>
  <div class="container-box download-path q-pa-md">
    <div class="top-operation flex">
      <div class="uploader-wrap flex">
        <q-uploader
          class="q-mr-md"
          url="http://localhost:4444/upload"
          label="打开电极坐标文件"
          style="max-width: 180px"
        />
        <q-uploader
          label="打开路径文件"
          url="http://localhost:4444/upload"
          style="max-width: 180px"
        />
      </div>
      <div class="operation-wrap">
        <div class="flex">
          <q-btn
            class="drop-btn q-mb-md"
            label="启动液滴运行"
            type="submit"
            color="primary"
          />
          <q-btn
            class="drop-btn q-mb-md q-mx-md"
            label="状态读取"
            type="submit"
            color="primary"
          />
          <q-btn
            class="drop-btn q-mb-md"
            label="关闭电极"
            type="submit"
            color="primary"
          />
        </div>
        <div class="set-steps flex">
          <label>起始步数：</label>
          <q-input
            class="q-mr-md"
            style="width: 100px"
            outlined
            type="number"
            v-model.number="startSteps"
            stack-label
            dense
          />
          <q-btn
            class="play-btn"
            round
            color="secondary"
            :icon="iconString"
            @click="onPlay()"
          />
        </div>
      </div>
    </div>
    <div class="display-drop-running q-mt-lg"></div>
    <div class="path-table">
      <div class="q-pa-md" style="width: 50%">
        <q-table
          class="my-sticky-header-table"
          :rows="pathTableRows"
          :columns="pathTableColumns"
          row-key="index"
          virtual-scroll
          v-model:pagination="pagination"
          :rows-per-page-options="[0]"
          flat
        />
      </div>
    </div>
  </div>
</template>
<script>
import { ref } from "vue";
export default {
  name: "DownloadPath",
  setup() {
    const pathTableColumns = [
      {
        name: "index",
        label: "#",
        field: "index",
      },
      {
        name: "fft",
        label: "路径",
        field: (row) => row.fft,
      },
      {
        name: "value",
        label: "延迟时间",
        field: "value",
      },
    ];
    let pathTableRows = [
      {
        fft: 111,
        value: 0,
      },
      {
        fft: 222,
        value: 1,
      },
      {
        fft: 333,
        value: 1,
      },
      {
        fft: 44,
        value: 0,
      },
      {
        fft: 55,
        value: 1,
      },
      {
        fft: 66,
        value: 1,
      },
    ];
    const startSteps = 1;
    pathTableRows.forEach((pathTableRows, index) => {
      pathTableRows.index = index;
    });
    const isPlay = ref(false);
    const iconString = ref("play_arrow");
    const onPlay = () => {
      isPlay.value = !isPlay.value;
      iconString.value = isPlay.value ? "pause" : "play_arrow";
    };
    const setSteps = () => {};
    return {
      pathTableColumns,
      pathTableRows,
      startSteps,
      isPlay,
      iconString,
      setSteps,
      onPlay,
    };
  },
};
</script>

<style lang="scss">
.top-operation {
  justify-content: space-between;
  .drop-btn {
    height: 40px;
  }
  .play-btn {
    height: 40px;
  }
}
.uploader-wrap {
  .q-uploader {
    height: 90px;
  }
}
.my-sticky-header-table {
  height: 300px;
  border: 1px solid #999;
}
.display-drop-running {
  width: 100%;
  height: 500px;
  background: black;
}
.set-steps {
  align-items: center;
  .step-input {
    height: 20px;
  }
}
</style>
